<template>
	<el-tabs v-model="tabUnitData.Frame" type="border-card" class="demo-tabs" closable
		@tab-remove="tabUnitData.removeTab">
		<el-tab-pane v-for="item in tabUnitData.getTabList" :key="item.name" :name="item.name">
			<!-- 另一个组件的插槽不能够放到组件中 -->
			<template #label>
				<el-badge :value="item.unread" class="item" :show-zero="false" :max="99" :offset="[30, 0]">
					<el-icon>
						<component :is="item.icon"></component>
					</el-icon>
					{{ item.title }}
				</el-badge>
			</template>
			<!-- 使用动态组件,切换tab的显示 -->
			<component :is="item.FrameType" :Unit="item" @sendMessageEvent="PCsendMessage"></component>
		</el-tab-pane>
		<el-empty v-if="tabUnitData.getTabList.length == 0" :image-size="200" description="暂无显示的窗口,你可以...">
			<el-button type="primary" color="#55aaff" style="color: aliceblue;"
				@click="tabUnitData.showTab('HOME')">展示首页</el-button>
			<el-button type="primary" color="#55aaff" style="color: aliceblue;">随机页面</el-button>
			<el-button type="primary" color="#55aaff" style="color: aliceblue;">动态背景</el-button>
		</el-empty>
	</el-tabs>
</template>

<script setup>
import {
	ref,
	getCurrentInstance,
	onMounted,
	reactive,
	computed
} from 'vue'

import {
	ElMessage,
	ElNotification
} from 'element-plus'

// 取出vue实例对象
let {
	proxy
} = getCurrentInstance();

// 导出仓库对象
import useUser from "@/store/user.js"
import useEmail from "@/store/email.js"
import useFriend from "@/store/friend.js"
import usepcChat from "@/store/pcChat.js"
import useTabUnit from "@/store/tabUnit.js"

let userData = useUser();
let emailData = useEmail();
let pcChatData = usepcChat();
let friendData = useFriend();
let tabUnitData = useTabUnit();

onMounted(() => {
	// 如果页面在socket连接完成以后,想要使用发送,或者接收方法,需要使用sokcet进行绑定
	// 当组件构建完成之后,向后端绑定请求绑定sokcet连接和账户对象
	let bind = pcChatData.messageFactory({
		sendID: "system",
		receiveID: "bind",
		room: "user",
		message: "请求绑定socket连接和用户信息",
		sendType: "system:bind:user",
	});
	bind.send(proxy.$socket);


	// 接收指令的区域
	// 接受到来自其他用户的邮件消息
	// 往邮件数组中增加一封新的邮件,然后弹出消息框,提示用户有一封新的邮件
	proxy.$socket.on("NewEmail", (emailObj) => {
		emailData.addEmailData(emailObj);
	})

	// 更新好友列表的指令
	proxy.$socket.on("NewFriend", () => {
		friendData.renewData(proxy.$axios, userData.user.friendId);
	})

	// 更新指定好友的在线状态的指令
	proxy.$socket.on("HintOnline", (id, username, state) => {
		// 提示用户好友状态更新
		if (friendData.setStateById(id, state)) {
			ElNotification({
				title: '有好友' + state,
				message: `用户${username}${state}`,
				type: state == "在线" ? 'success' : 'warning',
				offset: 100,
				duration: 4000,
			})
		}
	})

	// 服务器连接成功事件
	proxy.$socket.on("connect", () => {
		userData.online = 1;
	});

	// 服务器连接失败事件
	proxy.$socket.on("connect_error", () => {
		userData.online = 3;
		//连接错误，尝试重新连接
		setTimeout(() => {
			proxy.$socket.connect();
		}, 3000);
	});

	// 服务器断开事件
	proxy.$socket.on("disconnect", (reason) => {
		userData.online = 2;
	});

	// 系统绑定事件
	proxy.$socket.on('system:bind:user', (reason) => {
		if (reason.room) {
			userData.online = 1;
		} else {
			userData.online = 3;
		}
	});
})


// 将数据发送给服务器,由服务器进行转发
let PCsendMessage = (receiveID, sendText) => {
	let sendObj = pcChatData.addMessage(receiveID, {
		room: "test", //房间决定了向那个频道发送数据
		sendID: userData.user._id, //谁发送的这条数据
		receiveID, //从函数传入的值，来决定传输给谁
		message: sendText, //文本从页面的输入框中获取
		sendType: "PC", //传输类型，PC为私聊类型，GC为群聊类型
	});

	sendObj.send(proxy.$socket);
}

// 接受来自私聊事件的数据
proxy.$socket.on("PC", (sendBody) => {
	let sendObj = pcChatData.addMessage(sendBody.sendID, sendBody);
})
</script>

<style scoped>
.demo-tabs {
	height: 100%;
}

.demo-tabs>.el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

/* 总界面的布局 */
/* 将组件分成20*20的方格 */
.el-tab-pane {
	display: grid;
	grid-template-columns: repeat(30, 1fr);
	grid-template-rows: repeat(30, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	height: 100%;
}
</style>